<template>
  <div class="about">
    <!--导航栏开始-->
    <nav-tab :navIndex="8"></nav-tab>
    <!-- 横幅开始 -->
    <div class="guanyu">
      <img src="../assets/882.jpg" />
    </div>
    <!-- 横幅结束 -->
    <!-- 内容开始 -->
    <div class="conter">
      <div class="jianjie">
        <h5>当前位置：首页>>关于我们>>{{ msg }}</h5>
        <div class="navs">
          <ul>
            <li
              :class="{ active: index === 1 }"
              @click="(index = 1), (msg = '大卖场简介')"
            >
              <a>大卖场简介</a>
            </li>
            <li
              :class="{ active: index === 2 }"
              @click="(index = 2), (msg = '资格证书')"
            >
              <a>资格证书</a>
            </li>
            <li
              :class="{ active: index === 3 }"
              @click="(index = 3), (msg = '经营理念')"
            >
              <a>经营理念</a>
            </li>
            <li
              :class="{ active: index === 4 }"
              @click="(index = 4), (msg = '公司相册')"
            >
              <a>公司视频</a>
            </li>
            <li
              :class="{ active: index === 5 }"
              @click="(index = 5), (msg = '联系我们')"
            >
              <a>联系我们</a>
            </li>
            <li
              :class="{ active: index === 6 }"
              @click="(index = 6), (msg = '在线留言')"
            >
              <a>在线留言</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="whole">
        <!-- 大卖场简介 -->
        <div class="simple" v-show="index == 1">
          <div class="simple_top">
            <h1>万力达消防设备大卖场</h1>
            <div class="simple_left">
              <p>
                万力达消防设备大卖场是国内顶尖的消防设备批发走量设备集结机构，更是生产厂家深度依赖的大卖场销售平台主渠道。万力达消防设备大卖场以批发消防设备量大而享誉业内，以销量大、质量优、性价比高、价格低，赢得了用户公认的优质口碑，万力达消防设备大卖场致力于为客户提供完善的售前、售中、售后一站式技术服务，零售商更是可享批发平台以下优惠价格福利！行业
                208家生产厂家挤身加盟到万力达消防设备大卖场中做批发冲量。是地产商、建筑总包商、消防工程公司、各大批发门店、个人施工队、政府项目业主争相合作大平台。卖场以“批发量大；价格更便宜”为宗旨。为您节省每一分钱也是万力达人的心愿！
              </p>
            </div>
            <div class="simple_right">
              <img src="../assets/3-1.jpg" />
            </div>
          </div>
          <div class="simple_foot">
            <div class="simple-back">
              <h1>为什么选择我们？</h1>
              <ul>
                <li>
                  <div class="simple1">
                    <div class="simple1-top">
                      <h1>资质全</h1>
                    </div>
                    <div class="boder1"></div>
                    <div class="simple1-foot">
                      <p>获得CCCF消防认证</p>
                      <p>一对一AB项目流向</p>
                    </div>
                  </div>
                  <!-- <img src="../assets/3-9.jpg" /> -->
                </li>
                <li>
                  <div class="simple2">
                    <div class="simple2-top">
                      <h1>品牌多</h1>
                    </div>
                    <div class="boder2"></div>
                    <div class="simple2-foot">
                      <p>208家生产厂家深度加</p>
                      <p>盟到大卖场跑销量地方</p>
                    </div>
                  </div>
                  <!-- <img src="../assets/3-8.jpg" /> -->
                </li>
                <li>
                  <div class="simple3">
                    <div class="simple3-top">
                      <h1>价格低</h1>
                    </div>
                    <div class="boder3"></div>
                    <div class="simple3-foot">
                      <p>极速报价一件起批</p>
                      <p>领骚国内行业卖场批发价</p>
                    </div>
                  </div>
                  <!--   <img src="../assets/3-7.jpg" /> -->
                </li>
                <li>
                  <div class="simple4">
                    <div class="simple4-top">
                      <h1>服务优</h1>
                    </div>
                    <div class="boder4"></div>
                    <div class="simple4-foot">
                      <p>全国各地提供</p>
                      <p>售中售后技术服务支持</p>
                    </div>
                  </div>
                  <!--   <img src="../assets/3-6.jpg" /> -->
                </li>
                <li>
                  <div class="simple5">
                    <div class="simple5-top">
                      <h1>口碑好</h1>
                    </div>
                    <div class="boder5"></div>
                    <div class="simple5-foot">
                      <p>人人都知道的实力卖场</p>
                      <p>一站式消防设备批发模式</p>
                    </div>
                  </div>
                  <!-- <img src="../assets/3-5.jpg" />  -->
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 大卖场简介 -->
        <!-- 资格证书 -->
        <div class="certificate" v-show="index == 2">
          <div v-for="(item, index2) in certList" :key="index2">
            <img :src="item.img" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <!-- 资格证书 -->
        <!-- 企业理念 -->
        <div class="idea" v-show="index == 3">
          <h1>企业理念</h1>
          <div class="idea_left">
            <ul>
              <li>
                忠信、坚韧、创新、和谐、共荣是万力达消防设备大卖场20余年历史发展沉淀的企业文化，成为了公司全体员工共同的核心价值观和行为准则。
              </li>
              <li>
                朝气蓬勃的企业，乐观向上的员工，协同和谐的团队是公司赢得市场竞争，走向更加辉煌的致胜法宝。
              </li>
              <li>企业宗旨：为客户创造价值，为员工创造幸福，为社会创造财富</li>
              <li>企业精神：忠信坚韧，创新改进</li>
              <li>企业核心价值观：责任、诚信、创造、共赢</li>
              <li>企业核心竞争力：人才、创新、品牌</li>
              <li>企业道德：厚德做人、立信治企</li>
              <li>企业愿景：追求卓越、中国第一、世界品牌</li>
              <li>经营理念：目标为王、共享共荣</li>
              <li>管理理念：严格管理精细化、规范管理标准化、创新管理全员化</li>
              <li>质量理念：以出现0.001%的问题为耻，以实现100%的合格为荣</li>
              <li>人才理念：尊重知识，尊重人才，知人善用，德才并举</li>
              <li>市场理念：顾客的需要就是市场</li>
              <li>安全理念：不放过每一个隐患，不报有每一丝侥幸</li>
              <li>团队理念：共享奋斗的历程，共享进取的艰辛，共享成功的喜悦</li>
              <li>工作理念：认真完成每件事，快乐工作每一天</li>
            </ul>
          </div>
        </div>
        <!-- 企业理念 -->
        <!-- 公司视频 -->
        <div class="atlas" v-show="index == 4">
          <!-- <img v-for="(item, index) in videoList" :key="index" :src="item.poster" /> -->
          <video
            v-for="(item, index1) in videoList"
            :key="'v' + index1"
            :src="item.url"
            :poster="item.poster"
            controls
          ></video>
          <!-- <img src="../assets/2-2.jpg" />
          <img src="../assets/2-3.jpg" />
          <img src="../assets/2-4.jpg" />
          <img src="../assets/2-5.jpg" />
          <img src="../assets/2-6.jpg" /> -->
        </div>
        <!--   <div class="paging" v-show="index == 4">
         <el-pagination
            background
            layout="prev, pager, next"
            :total="1000"
          ></el-pagination> 
        </div>-->
        <!-- 公司视频 -->
        <!-- 联系我们 -->
        <div class="contact" v-show="index == 5">
          <h1>欢迎新老客户来万力达消防设备大卖场参观考察</h1>
          <div class="address">
            <ul>
              <li>
                <img src="../assets/5-2.jpg" />
                <h2>公司地址</h2>
                <p>地址：{{configData.city}}</p>
                <!-- <p>泰财富中心A座501/502/505室</p> -->
              </li>
              <li>
                <img src="../assets/5-3.jpg" />
                <h2>联系方式</h2>
                <p>手机：{{configData.mobile}}</p>
                <!-- <p>服务热线：{{configData.hotile}}</p> -->
              </li>
              <li>
                <img src="../assets/5-4.jpg" />
                <h2>联系邮箱</h2>
                <p>{{configData.mail}}</p>
              </li>
              <li>
                <img src="../assets/5-5.jpg" />
                <h2>联系QQ</h2>
                <p>{{configData.qq}}</p>
              </li>
            </ul>
          </div>
          <div class="map">
            <!-- <img src="../assets/5-1.jpg" /> lng: configData.coordinate.split(',')[0], lat: configData.coordinate.split(',')[1]}-->
            <baidu-map id="container" ref="container" class="bm-view" :center="{lng: configData.coordinate.split(',')[0], lat: configData.coordinate.split(',')[1]}" :zoom="20" :scroll-wheel-zoom="true">
              <bm-marker :position="{lng: configData.coordinate.split(',')[0], lat: configData.coordinate.split(',')[1]}" :dragging="false" @click="infoWindowOpen">
                <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
                  万力达消防设备大卖场<br />
                  地址：陕西万力达消防设备有限公司
                </bm-info-window>
              </bm-marker>
            </baidu-map>
          </div>
        </div>
        <!-- 联系我们 -->

        <!-- 在线留言 -->
        <div class="Leaving" v-show="index == 6">
          <h1>给我们留言</h1>
          <div class="frame">
            <input
              class="frame1"
              placeholder="您的姓名"
              v-model="message.name"
            />
            <input
              class="frame2"
              placeholder="您的联系方式"
              v-model="message.mobile"
            />
            <input
              class="frame3"
              placeholder="您的邮箱"
              v-model="message.emil"
            />
            <input
              class="frame4"
              placeholder="您的公司"
              v-model="message.company"
            />
            <textarea
              style="resize: none"
              class="frame5"
              placeholder="请输入您的需求内容"
              v-model="message.demand"
            ></textarea>

            <button class="tijiao" @click="sendMess">提交信息</button>
          </div>
        </div>
        <!-- 在线留言 -->
      </div>
    </div>
    <!-- 内容结束 -->
    <!-- 页脚开始 -->
    <Footer></Footer>
  </div>
</template>

<script>
import NavTab from "../components/navtab";
import Footer from "../components/footer";
export default {
  components: {
    NavTab,
    Footer,
  },
  data() {
    return {
      index: 5,
      msg: "大卖场简介",
      message: {
        name: "",
        mobile: "",
        emil: "",
        company: "",
        demand: "",
      },
      videoList: [],
      certList: [],
      configData: {
        city: '西安市北三环西端10号泰财富中心501/502/505室'
      },
      show: true
    };
  },
  mounted() {
    this.getVideo();
    this.getCert();
    this.getConfig();
    //跳转到顶部
    window.scrollTo(0, 0);
    if (this.$route.query.num) {
      this.index = +this.$route.query.num;
    }
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    },
    sendMess() {
      // 用户留言
      var _this = this;
      _this.$ajax
        .post("http://api.wld119.com/api/v1/Leaving/add", this.message)
        .then((res) => {
          console.log("用户留言", res.data.result);
          alert("留言成功");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getVideo() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/video")
        .then((res) => {
          console.log("公司视频", res.data.result.data);
          this.videoList = res.data.result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getCert() {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/cert")
        .then((res) => {
          console.log("证书图片", res.data.result.data);
          this.certList = res.data.result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
          
          // var map = new BMap.Map("container");          // 创建地图实例  
          // var point = new BMap.Point(108.946183,34.315465);  // 创建点坐标  lng: '108.946183', lat: '34.315465'
          // map.centerAndZoom(point, 20);                 // 初始化地图，设置中心点坐标和地图级别  
          // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
          // var marker = new BMap.Marker(point);        // 创建标注    
          // map.addOverlay(marker); 
          // map.panBy(600, 350)
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.about {
  min-width: 1200px;
}
/* 横幅 */
.guanyu img {
  width: 100%;
}
/* 横幅 */
/* 内容开始 */
.conter {
  width: 1200px;
  margin: 0 auto;
}
.navs {
  width: 1200px;
  height: 67px;
  margin: 0 auto;
  margin-top: 1em;
}
.navs ul {
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  border-left: 1px solid #ededed;
}
.navs li {
  border-right: 1px solid #ededed;
}
.navs li {
  line-height: 67px;
  clear: none;
  height: 60px;
  padding-left: 65px;
  padding-right: 65px;
}
.navs ul {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.active a {
  padding: 3px;
  border-bottom: 5px solid #0061ae;
}
/* 公司视频 */
.atlas {
  width: 1200px;
  text-align: center;
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
}
.atlas video {
  width: 590px;
  height: 300px;
  padding: 10px 0px;
}
/* 公司视频 */
/* 大卖场简介 */
.simple_top {
  width: 1200px;
  height: 320px;
  margin-top: 0 auto;
  overflow: hidden;
}
.simple h1 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  margin-top: 1em;
}
.simple_left {
  width: 700px;
  float: left;
  font-size: 15px;
  margin-top: 10px;
  letter-spacing: 2px;
  padding: 15px;
  overflow: hidden;
}
.simple_right {
  width: 470px;
  float: right;
  margin-top: 23px;
  overflow: hidden;
}
.simple_right img {
  height: 235px;
  overflow: hidden;
}
.simple_foot h1 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
.simple_foot {
  width: 100%;
  min-width: 1200px;
}
.simple-back {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.simple_foot ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.simple1,
.simple2,
.simple3,
.simple4,
.simple5 {
  width: 220px;
  height: 335px;
  background: #fff;
}
.simple1 h1,
.simple2 h1,
.simple3 h1,
.simple4 h1,
.simple5 h1 {
  padding: 5px;
  font-size: 45px;
  color: darkgoldenrod;
}
.boder1,
.boder2,
.boder3,
.boder4,
.boder5 {
  width: 150px;
  border-top: 1px solid #333;
  margin: 50px auto;
}
.simple1-foot,
.simple2-foot,
.simple3-foot,
.simple4-foot,
.simple5-foot {
  margin-top: 60px;
}
/* .boder1{
  width: 100px;
  border: 1px solid #333;
} */
/*.simple_foot img {
  float: left;
  overflow: hidden;
  width: 240px;
  margin-top: 10px;
} */
/* 大卖场简介 */
/* 联系我们 */
.contact {
  width: 1200px;
  margin: 0 auto;
  margin-top: 1em;
  overflow: hidden;
}
.contact h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.address {
  width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.address ul li {
  margin-top: 20px;
  width: 290px;
  height: 220px;
  border: 1px solid #f3f3f3;
  float: left;
  overflow: hidden;
}
.address ul h2 {
  font-size: 19px;
  font-family: initial;
  text-align: center;
}
.address ul p {
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
  padding: 0 20px;
}
.address img {
  margin-top: 20px;
}
.map {
  width: 1200px;
  height: 700px;
  margin-top: 20px;
  text-align: center;
}
.bm-view{
  width: 100%;
  height: 100%;
}
.map img {
  width: 1200px;
  margin-top: 20px;
  text-align: center;
}
.address li {
  transition: 0.3s all ease;
  border: 1px solid #000;
  position: relative;
}
.address li:hover {
  transform: scale(1.2);
  z-index: 1;
  background: #fff;
}

/* 联系我们 */
/* 企业理念 */
.idea {
  width: 1200px;
  margin: 0 auto;
  height: 500px;
  background: url("../assets/5-7.jpg") no-repeat;
  background-position: 700px 80px;
  background-size: 500px 400px;
}
.idea h1 {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.idea_left {
  font-size: 14px;
  margin-top: 20px;
  letter-spacing: 1px;
  font-style: initial;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}
.idea_left li {
  margin-top: 2px;
}

/* 企业理念 */
/* 在线留言 */
.Leaving {
  margin-top: 20px;
  height: 400px;
  text-align: center;
}
.Leaving h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.frame {
  width: 1200px;
  margin: 0 auto;
}
.frame1 {
  margin-top: 1em;
  height: 35px;
  border: 0 solid #fff;
  width: 500px;
  height: 40px;
  border: 2px solid #e5e5e5;
}
.frame2 {
  margin-top: 1em;
  height: 35px;
  border: 0 solid #fff;
  width: 500px;
  height: 40px;
  border: 2px solid #e5e5e5;
  margin-left: 20px;
}
.frame3 {
  margin-top: 1em;
  height: 35px;
  border: 0 solid #fff;
  width: 500px;
  height: 40px;
  border: 2px solid #e5e5e5;
}
.frame4 {
  margin-top: 1em;
  height: 35px;
  border: 0 solid #fff;
  width: 500px;
  height: 40px;
  border: 2px solid #e5e5e5;
  margin-left: 20px;
}
.frame5 {
  margin-top: 1em;
  height: 35px;
  border: 0 solid #fff;
  width: 1030px;
  height: 100px;
  border: 2px solid #e5e5e5;
}
.tijiao {
  background: #0061ae;
  color: #ffffff;
  width: 250px;
  height: 40px;
  border: 0;
  margin-top: 2em;
}
/* 在线留言 */
/* 资格证书 */
.certificate {
  text-align: center;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  margin-top: 1em;
}

/* 资格证书 */
/* 内容结束 */
</style>